---
name: Set up webpack config 1
route: /installation1
menu: Installation
---

# Set up webpack config 1

Copy whole Cesium files and load Cesium in HTML.

See also: [example project](https://github.com/darwin-education/resium/tree/master/example)

## 1. Install webpack plugins

```
npm install --save-dev copy-webpack-plugin html-webpack-plugin html-webpack-include-assets-plugin
# or
yarn add copy-webpack-plugin html-webpack-plugin html-webpack-include-assets-plugin
```

Then, edit your webpack configuration.

## 2. Add `cesium` to externals

Cesium will be loaded in HTML. Notify it to webpack.

```js
{
  externals: {
    cesium: "Cesium";
  }
}
```

When cesium is loaded, webpack uses `window.Cesium` instead of loading source files.

## 3. Add copy-webpack-plugin

Copy whole Cesium files at build time.

```js
const CopyWebpackPlugin = require("copy-webpack-plugin");
```

```js
{
  plugins: [
    new CopyWebpackPlugin({
      patterns: [
        {
          from: "node_modules/cesium/Build/Cesium",
          to: "cesium",
        },
      ],
    }),
  ];
}
```

`node_modules/cesium/Build/Cesium` is already minified. If you want to debug Cesium, use unminified version: `node_modules/cesium/Build/CesiumUnminified`.

The recommended way is to load the minified version in production mode, and the unminified version in development mode.

```js
module.exports = (env, argv) => {
  const prod = argv.mode === "production";

  return {
    // ...
    plugins: [
      // ...
      new CopyWebpackPlugin({
        patterns: [
          {
            from: `node_modules/cesium/Build/Cesium${prod ? "" : "Unminified"}`,
            to: "cesium",
          },
        ],
      }),
    ],
  };
};
```

But Cesium is a heavy library, so you can also use the minified version even in development mode.

## 4. Add html-webpack-plugin and html-webpack-include-assets-plugin

Load Cesium js and css files in HTML.

```js
const HtmlWebpackPlugin = require("html-webpack-plugin");
const HtmlWebpackIncludeAssetsPlugin = require("html-webpack-include-assets-plugin");
```

```js
{
  plugins: [
    // ...
    new HtmlWebpackPlugin(),
    new HtmlWebpackIncludeAssetsPlugin({
      append: false,
      assets: ["cesium/Widgets/widgets.css", "cesium/Cesium.js"],
    }),
  ];
}
```

## 5. Add definition of CESIUM_BASE_URL

Cesium refers to `CESIUM_BASE_URL` to find asset files.

```js
const webpack = require("webpack");
```

```js
{
  plugins: [
    new webpack.DefinePlugin({
      CESIUM_BASE_URL: JSON.stringify("/cesium"),
    }),
  ];
}
```

Note: If `publicPath` in webpack config is changed, CESIUM_BASE_URL may have to be changed also.

## Ready!

Everything is ready! Advance to [Getting Started](/getting_started).

You can import Cesium directly:

```js
import { Cartesian3 } from "cesium";
```

Pro tip: you can enable HMR (hot module replacement) with [react-refresh-webpack-plugin](https://github.com/pmmmwh/react-refresh-webpack-plugin).
